<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <link rel="stylesheet" href="${request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
</head>
<style>
  textarea{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: 200px;
  }
</style>
<body style="background-color: #F2F2F2;" >
<div style="padding: 20px;" class="layui-container">
  <div class="layui-row layui-col-space15" style="text-align: center">
    <div class="layui-col-md12" style="margin-top: 100px">
      <div class="layui-card">
<#--        <div class="layui-card-header">-->
<#--          <br>-->

<#--          <br>-->
<#--        </div>-->
        <div class="layui-card-body" >
          <h4 style="font-size: 30px;padding-top: 10px;padding-bottom: 10px">智能语音转文字系统</h4>
          <form class="layui-form" style="margin-top: 50px">
            <div class="layui-form-item">
              <label class="layui-form-label">项目名称</label>
              <div class="layui-input-inline">
                <input type="text" name="title" id="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">语言选择</label>
              <div class="layui-input-inline">
                <select id="type" style="height: 35px">
                  <option value="1537">普通话</option>
                  <option value="1737">英语</option>
                  <option value="1637">粤语</option>
                  <option value="1837">四川话</option>
                  <option value="1936">普通话远场</option>
                </select>
              </div>
            </div>
              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">识别结果</label>
                <div class="layui-input-block">
                  <textarea id="result" name="desc"  class="layui-textarea"></textarea>
                </div>
              </div>

          </form>

          <button type="button" class="layui-btn" id="upload">上传</button>
          <button type="button" class="layui-btn" id="download">导出</button>
          <br>
          <br>
        </div>
      </div>

    </div>
  </div>

</div>
<script src="${request.contextPath}/layuiadmin/layui/layui.js"></script>
<script src="${request.contextPath}/layuiadmin/lib/echarts.min5.2.2.js"></script>

<script>
  layui.config({
    base: '${request.contextPath}/layuiadmin/modules/' //静态资源所在路径
  }).extend({
    xmSelect: 'xm-select'
  }).use(['form','jquery','laydate','upload'], function(){
    var form=layui.form;
    var $=layui.$;
    var upload = layui.upload

    var type=$("#type  option:selected").val();

    upload.render({
      elem: '#upload'
      ,url: '${request.contextPath}/file/fileUpload?' //此处配置你自己的上传接口即可
      ,accept: 'file' //普通文件
      ,done: function(res){
        layer.alert('解析成功', { icon: 1, closeBtn: 0 }, function (index) {
          layer.closeAll()
          var data=JSON.parse(res.msg)
          console.log('result',data.result[0])
          $("#result").text(data.result[0])
          form.render()
        });

        // layer.alert('上传成功');
        //
        // console.log(res);
      }
      ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
        type=$("#type  option:selected").val();
        console.log("type",type)
        this.data.type=type
        layer.load(); //上传loading
      }
    });


    // $("#type").change(function (){
    //
    //   type=
    //   console.log('type',type)
    // })

    $("#download").click(function(){
      var title=$("#title").val()
      if(title===''||title===undefined){
        title="导出结果"
      }
      var content = $('#result').val();
      if(content===''){
        layer.msg("结果中没有任何内容，请重试")
        return
      }
      funDownload(content, title+'.txt');
    });
    window.funDownload = function (content, filename) {
      // 创建隐藏的可下载链接
      var eleLink = document.createElement('a');
      eleLink.download = filename;
      eleLink.style.display = 'none';
      // 字符内容转变成blob地址
      var blob = new Blob([content]);
      eleLink.href = URL.createObjectURL(blob);
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    };

  });
</script>
<script type="text/javascript">

</script>
</body>
</html>